<template>
  <div class="login-form">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px; width: 300px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <h1 style="text-align: center">账号登录</h1>
      <!-- 用户名表单 -->
      <el-form-item prop="usernameOrEmail">
        <el-input
          v-model="ruleForm.usernameOrEmail"
          placeholder="用户名或邮箱"
          @blur="validateUsernameOrEmail"
        />
        <div v-show="flagA" style="color: red; height: 8px">用户名格式错误</div>
        <div v-show="flagC" style="color: red; height: 8px">邮箱格式错误</div>
      </el-form-item>

      <!-- 密码表单 -->
      <el-form-item prop="password">
        <el-input
          v-model="ruleForm.password"
          placeholder="输入密码"
          show-password
          type="password"
          @blur="validatePassword"
        />
        <div v-show="flagB" style="color: red; height: 8px">密码格式错误</div>
      </el-form-item>
      <!-- 记住密码 -->
      <el-checkbox v-model="checkedRadio">记住密码</el-checkbox>
      <!-- 忘记密码 -->
      <router-link to="/forgetPassword">忘记密码</router-link>
      <el-form-item>
        <el-button type="primary" @click="loginMethod()" style="width: 300px">
          登录
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="registerMethod()" style="width: 300px"
          >注册</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 图片验证码 -->
    <Code v-if="flagF" :message="parentMessage"></Code>
  </div>
</template>

<script  setup>
//引入相关变量
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { login, remPw } from "../api/login";
import { definedUser } from "../store/user";
import Code from "./Code.vue";

//创建路由对象
const router = useRouter();

//创建仓库对象
const currUser = definedUser();

const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  usernameOrEmail: "liangliang",
  password: "Zzz123456",
});

//单选按钮字段
const checkedRadio = ref(false);
//检验变量
let flagA = ref(false);
let flagC = ref(false);
const validateUsernameOrEmail = () => {
  if (ruleForm.usernameOrEmail.indexOf("@") == -1) {
    //校验用户名
    flagC.value = false;
    var regx = /^[a-zA-Z][a-zA-Z0-9_-]{5,}$/;
    flagA.value = !regx.test(ruleForm.usernameOrEmail);
  } else {
    //校验邮箱
    flagA.value = false;
    var regx = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    flagC.value = !regx.test(ruleForm.usernameOrEmail);
  }
};

//校验密码
let flagB = ref(false);
const validatePassword = () => {
  var regx = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
  flagB.value = !regx.test(ruleForm.password);
};

//次数变量
var count = 0;
//显示隐藏图片验证码
const flagF = ref(false);
const loginMethod = async () => {
  console.log(ruleForm);
  const { data } = await login(ruleForm);
  console.log(data);

  if (data.code == 200) {
    currUser.username = data.data.username;
    currUser.lastLoginDate = data.data.lastLoginDate;
    currUser.lastLoginIp = data.data.lastLoginIp;
    localStorage.setItem("token", data.data.token);
    //
    if (checkedRadio.value) {
      await remPw(ruleForm.usernameOrEmail, ruleForm.password);
    }
    //登录成功跳转到首页
    router.push("/menu/home");
  } else {
    //登录失败三次出现图片验证码
    count++;
    if (count >= 3) {
      flagF.value = true;
      count = 0;
    }
  }
};

const registerMethod = () => {
  router.push("/register");
};
</script>

<style scoped>
.login-form {
  width: 500px;
  height: 500px;
  margin: 300px auto;
}

a {
  color: black;
  font-size: 14px;
  text-decoration: none;
  margin-left: 160px;
}
</style>